<!DOCTYPE html>
<html>
<head>
<title>嘉应客茶</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

.top-title {
    font-size: 20px;
    text-align: center;
    padding: 15px 0 5px;
}

.tips {
    text-align: center;
    color: #999;
    font-size: 12px;
}

a {
    color: #5db9f8;
    text-decoration: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    outline: none;
}

.cx-wrap {
    margin: 0 10px;
}

.list-detail {
    display: block;
    max-width: 600px;
    text-align: left;
    background-color: #fff;
    padding: 0 10px;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    margin: 15px auto;
}

.list-detail dd {
    line-height: 2;
    border-bottom: 1px solid #f4f4f4;
    padding: 5px 0;
    overflow: hidden;
}

.list-detail dd .title {
    float: left;
}

.list-detail dd .text {
    margin-left: 110px;
    padding: 3px 0;
    line-height: 1.5;
    word-break: break-all;
    text-align: left;
}

.gui-icon {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-image: url("");
    width: 18px;
    height: 18px;
}

.icon-cppcm {
    background-position: -168px -179px;
}

.icon-sl {
    background-position: 0px -207px;
}

.icon-cplb {
    background-position: -112px -179px;
}

.icon-zjqk {
    background-position: -84px -207px;
}

.icon-ztmc {
    background-position: -140px -207px;
}

.icon-ztdz {
    background-position: -112px -207px;
}

.icon-frxm {
    background-position: -215px -28px;
}

.icon-lxfs {
    background-position: -215px -112px;
}

.icon-ztsfm {
    background-position: -168px -207px;
}

.list-detail dd .gui-icon {
    margin-right: 5px;
}

.gui-popup {
    font-size: 14px;
}

.gui-popup .popup-header {
    background-color: #f6fff9;
    border-bottom: 1px solid #ebf6f4;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.gui-popup .popup-header h2 {
    font-size: 16px;
    color: #228a3a;
    font-weight: 400;
    line-height: 50px;
    padding: 0 15px;
}

.gui-section.section-table {
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
    margin: 0;
}

.list-media {
    background: none;
    margin-left: -20px;
}

.gui-list {
    margin: 0 auto;
    background: #ffffff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

li {
    list-style: none;
}

.list-media li {
    width: 20%;
    padding: 0 0 0 20px;
    float: left;
    margin-bottom: 15px;
    position: relative;
}

.gui-list > li, .gui-list > dt, .gui-list > dd, .gui-list .list-item {
    padding: 5px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.gui-col-1 {
    width: 100% !important;
}

.float-left {
    float: left !important;
}

.list-media li .desc {
    padding: 10px 5px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.list-media li .text {
    padding-top: 10px;
    display: inline-block;
    max-width: 80%;
    word-break: break-all;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.gui-popup .popup-footer {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    background-color: #fbfbfb;
    padding: 15px 10px;
    text-align: center;
    width: 100%;
}

.gui-btn, a.gui-btn {
    display: inline-block;
    height: 36px;
    padding: 5px 12px;
    line-height: 18px;
    font-size: 14px;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #28b84a;
    background-color: #28b84a;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.gui-popup {
    width: 530px;
    border-radius: 2px;
    padding: 0;
    background: #FFF;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 100px;
}

.ngdialog-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.alert {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.jubao {
    padding-left: 30px;
}

.jubao div {
    margin-bottom: 15px;
    margin-top: 15px;
}

.jubao div span {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    color: #333;
}

.jubao div input {
    width: 180px;
    line-height: 30px;
    border-radius: 5px;
    border: 1px solid #f4f4f4;
    padding-left: 10px;
}
</style>
</head>
<body>
<div id='kecha'>
<h1 class="top-title ng-scope">嘉应客茶农产品质量安全追溯管理信息平台</h1>
<p class="tips ng-scope"><a href="http://qsst.moa.gov.cn">jiayingkecha.com</a></p>
<div class="cx-wrap ng-scope">
<dl class="list-detail">
<dd>
    <div class="title"><strong>产品信息</strong></div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-cppcm"></span>产品名称：
</div>
<div class="text ng-binding" ng-bind="queryInfo.ALIAS">@{{ batch.product.product_name }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-cppcm"></span>通用名称：
</div>
<div class="text ng-binding" ng-bind="queryInfo.PRODUCT_NAME">@{{ batch.product.product_name }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-cplb"></span>产品类别：
</div>
<div class="text ng-binding" ng-bind="queryInfo.PRODUCT_SORT">@{{ batch.product.variety_name }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-sl"></span><span ng-bind="countTitle" class="ng-binding">收获数量</span>：
</div>
<div class="text ng-binding" ng-bind="queryInfo.sldw">@{{ batch.number }}@{{ batch.unit }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-sl"></span><span ng-bind="timeTitle" class="ng-binding">收获时间</span>
</div>
<div class="text ng-binding" ng-bind="queryInfo.HARVEST_TIME">@{{ batch.receive_time }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-zjqk"></span>质检情况：
</div>
<div class="text">@{{ batch.quality_result == 1 ? '合格' : '不合格' }}</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-cppcm"></span>追溯码：
</div>
<div class="text ng-binding" ng-bind="queryInfo.TRACE_CODE">@{{ batch.source_code }}</div>
</dd>
<dd v-for="image in batch.image">
<div class="title">
    <span class="gui-icon icon-cppcm"></span>图片：
</div>
<div class="text" id="image">
	                <span class="ng-scope">
	                    <a @click="show_media(1, image.url)" style="cursor: pointer" class="ng-binding">@{{ image.file}}</a>
	                </span>
</div>
</dd>
<dd v-for="video in batch.video">
<div class="title">
    <span class="gui-icon icon-cppcm"></span>视频：
</div>
<div class="text" id="video">
	            	<span class="ng-scope">
	                    <a @click="show_media(2, video.url)" style="cursor: pointer" class="ng-binding">@{{ video.file}}</a>
	                </span>
</div>
</dd>
<dd class="ng-hide">
<div class="title">
    <span class="gui-icon icon-cppcm"></span>操作：
</div>
<div class="text" id="video">
	            	<span class="ng-scope">
	                    <a onclick="showAlert(3,true)" style="cursor: pointer" class="ng-binding">举报</a>
	                </span>
</div>
</dd>
{{--<dd class="ng-hide">--}}
{{--    <div class="title">--}}
{{--        <span class="gui-icon icon-cppcm"></span>有机食品：--}}
{{--    </div>--}}
{{--</dd>--}}
{{--<dd class="ng-hide">--}}
{{--    <div class="title">--}}
{{--        <span class="gui-icon icon-cppcm"></span>无公害农产品：--}}
{{--    </div>--}}
{{--</dd>--}}
<dd>
    <div class="title"><strong>主体信息</strong></div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-ztmc"></span>主体名称：
</div>
<div class="text ng-binding" ng-bind="queryInfo.ENTERPRISE_NAME">广东南龙嶂农林科技有限公司</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-ztdz"></span>主体地址：
</div>
<div class="text ng-binding" ng-bind="queryInfo.ADDRESS">广东省梅州市梅县区梅南镇北洞村自在坪</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-frxm"></span>联系人：
</div>
<div class="text ng-binding" ng-bind="queryInfo.NAME">危颂宁</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-lxfs"></span>联系方式：
</div>
<div class="text ng-binding" ng-bind="queryInfo.PHONE">13509091719</div>
</dd>
<dd>
<div class="title">
    <span class="gui-icon icon-ztsfm"></span>主体身份码：
</div>
<div class="text ng-binding" ng-bind="queryInfo.USER_IDCODE">2.91441402061452983K.00001</div>
</dd>
<dd style="text-align: center">
    <p class="tips">生产经营主体对追溯信息真实性负责</p>
</dd>
</dl>
</div>
<div class="alert" id="alert" style="display: none">
<div class="ngdialog-overlay"></div>
<div class="gui-popup">
<div class="popup-header">
    <h2 id="ngdialog1-aria-labelledby">查看</h2>
</div>

<div class="gui-section section-table" style="margin: 8px;">
<ul class="gui-list list-media clearfix">
<li class="gui-col-1 ng-scope" id="imgbox" style="display: none;">
<div class="clearfix">
    <img class="float-left ng-scope" style="width:100%" :src="now_media">
</div>
<p class="desc" id="ngdialog1-aria-describedby"><span class="text ng-binding">图片</span></p>
</li>
<li class="gui-col-1 ng-scope" id="videobox" style="display: none;">
<div class="clearfix">
<video class="float-left ng-scope" style="width:100%" :src="now_media"
       controls="controls">
    你的浏览器不支持视频
</video>
</div>
<p class="desc" id="ngdialog1-aria-describedby"><span class="text ng-binding">视频</span></p>
</li>
<div class="jubao" id='jubao' style="display: none;">
<div>
    <span>姓名:</span>
    <input type="text" placeholder="请输入姓名" v-model='name'>
</div>
<div>
    <span>手机号:</span>
    <input type="text" placeholder="请输入手机号" v-model='phone'>
</div>
<div>
    <span>举报理由:</span>
    <input type="text" placeholder="请输入理由" v-model='reason'>
</div>
</div>
</ul>
</div>
<div class="popup-footer" id='footerbtn' style="display: none;">
    <button type="button" class="gui-btn btn-mid" onclick="showAlert(false)">关闭</button>
</div>
<div class="popup-footer" id='footerbtns' style="display: none;">
    <button type="button" class="gui-btn btn-mid" onclick="showAlert(false)">关闭</button>
    <button type="button" class="gui-btn btn-mid" @click="report()">发送</button>
</div>
</div>
</div>
</div>
</body>
<script src="{{ asset('statics/js/home/vue.min.js')}}"></script>
<script src="{{ asset('statics/js/home/jquery.min.js')}}"></script>
<script type="text/javascript">
function showAlert(type, show) {
    // 弹窗
    var alert = document.getElementById("alert");
    // 图片卡片
    var img = document.getElementById("imgbox");
    // 视频卡片
    var video = document.getElementById("videobox");
    // 关闭按钮
    var footerbtn = document.getElementById("footerbtn");
    // 举报发送按钮
    var footerbtns = document.getElementById("footerbtns");
    // 弹窗标题
    var labelledby = document.getElementById("ngdialog1-aria-labelledby");
    // 举报文本框
    var jubao = document.getElementById("jubao");
    // 如果关闭 清楚弹窗内容
    if (!type) {
        alert.style.display = 'none';
        img.style.display = 'none';
        video.style.display = 'none';
        footerbtn.style.display = 'none';
        footerbtns.style.display = 'none';
        jubao.style.display = 'none';
        return;
    }
    // 是不是举报
    if (type != 3) {
        footerbtn.style.display = 'inline-block';
        labelledby.innerHTML = '查看';
    } else {
        footerbtns.style.display = 'inline-block';
        labelledby.innerHTML = '举报';
    }
    if (type == 1) {
        img.style.display = 'inline-block';
    }
    if (type == 2) {
        video.style.display = 'inline-block';
    }
    if (type == 3) {
        jubao.style.display = 'inline-block';
    }
    alert.style.display = 'inline-block';
}

let vm = new Vue({
    el: "#kecha",
    filters: {},
    components: {},
    data() {
        return {
            batch: {},
            now_media: "",
            name: "",
            phone: "",
            reason: "",
            source_code: "",
        };
    },
    created() {
        this.content()
    },
    methods: {
        content() {
            let _that = this

            $.ajax({
                method: 'get',
                url: '{{ $url }}',
                data: {},
                success: function (data) {
                    if (data.code !== 0) {
                    }

                    _that.batch = data.data.productBatch
                    _that.source_code = data.data.source_code
                    console.log(data.data)
                }
            });
        },
        show_media(type, url) {
            console.log(url)
            if (type != 3) {//展示图片
                this.now_media = url
            }
            showAlert(type, true)
        },
        report() {
            if (this.name == '' || this.phone == '' || this.reason == '') {
                alert('请填写完整信息')
                return
            }
            $.ajax({
                method: 'post',
                url: '/api/report',
                data: {
                    name: this.name,
                    phone: this.phone,
                    reason: this.reason,
                    batch_id: this.batch.batch_id,
                    source_code: this.source_code,
                },
                success: function (data) {
                    console.log(data)
                    if (data.code !== 0) {
                        alert(data.msg)
                        return
                    }
                    showAlert(false)
                }
            });
        },
    }
});

</script>
</html>
